<template>
	<view class="playList-container playListComponet">
		<div class="hot-body">
			<view class="item" v-for="item in dataList" :key="item.id" @click="goGeDanDetail(item.id)">
				<div class="xiex-image">
					<xiex-image :src="item.coverImgUrl"></xiex-image>
				</div>
				<p class="describe">{{item.name}}</p>
			</view>
		</div>
	</view>
</template>
<script>
	export default {
		data(){
			return {
				dataList: null
			}
		},
		watch:{

		},
		props:{
			dataList2:{
				type: Array,
				default: null
			}
		},
		methods:{
			goGeDanDetail(id){
				// console.log(id)
				uni.navigateTo({
					url: '../../../pages/other/gedanDetail/gedanDetail?resourceId='+ id,
					animationType: 'slide-in-right',
					animationDuration: 200
				})
			},
			
			getPlayList(index){
				// console.log(index)			
				uni.request({
					url: 'http://119.3.174.206:3000/top/playlist?limit=15&cat='+index,
					success: (res) => {
						// console.log(res)
						this.dataList=res.data.playlists
						console.log(this.dataList2)
					}
				})
			},
			// handleLoad(item){
			// 	item.status = 1
			// 	console.log(item)
			// }
		
		}
	}
</script>
<style lang="less">
	.playList-container {
		// background-color: yellow;
		font-size: 20rpx;
		padding-bottom: 80rpx;
		.hot-body {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			view {
				// display: inline-block;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 20rpx 20rpx;
				height: 270rpx;
				width: 27%;
				border-radius: 20rpx;
				// border: 1px solid #ccc;
				.xiex-image {
					display: inline-block;
					height: 70%;
					width: 100%;
					
				}
				.describe {
					height: 74rpx;
					line-height: 37rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					
				}
			}
		}
			
	}
</style>